import { topAlarm } from "@/api/modules/iot/alarm";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { dayjs } from "element-plus";
import CardHead from "./components/cardHead";
import { RouterPath } from "@/enums/routerPath";
import { gotoPage } from "@/utils/routerUtil";
import { ComponentInternalInstance, getCurrentInstance } from "vue";
export default defineComponent({
	setup() {
		return () => {
			const { proxy } = getCurrentInstance() as ComponentInternalInstance;
			const proTable = ref<any>();
			const columns: ColumnProps[] = [
				{ prop: "index", label: proxy?.$t("alarmmonitor.tablist_label.index"), width: 100 },
				{ prop: "devSn", label: proxy?.$t("alarmmonitor.tablist_label.devSn") },
				{ prop: "count", label: proxy?.$t("alarmmonitor.tablist_label.count"), width: 100 }
			];
			const dataCallback = (data: any) => {
				let dataList: any[] = [];
				data.devAlarm.forEach((item: any) => {
					dataList.push({
						count: item.count,
						devSn: item._id,
						devName: data.devName[item._id] || item._id
					});
				});
				return {
					datalist: dataList
				};
			};
			const state = reactive<any>({
				timeRange: [dayjs().add(-7, "d").format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")]
			});
			const param = reactive({ topSize: 10, startTime: "", endTime: "" });
			const getTableList = async () => {
				param.startTime = state.timeRange[0] + " 00:00:00";
				param.endTime = state.timeRange[1] + " 23:59:59";
				return topAlarm(param);
			};
			//时间切换
			watch(
				() => state.timeRange,
				() => {
					proTable.value.getTableList();
				}
			);
			return (
				<div class="top-level">
					<el-card
						class="h-full"
						v-slots={{
							header: () => (
								<div class="flex justify-between content-center">
									<span class="card-title">{proxy?.$t("alarmmonitor.card_title.rank")}</span>
									<CardHead v-model:timeRange={state.timeRange}></CardHead>
								</div>
							)
						}}
						shadow="never"
						body-style={{ padding: 0 }}
					>
						<ProTable
							ref={proTable}
							columns={columns}
							requestApi={getTableList}
							dataCallback={dataCallback}
							toolButton={false}
							pagination={false}
						>
							{{
								index: (scope: any) => {
									return <div class={["level-block", `level-${scope.rowIndex + 1}`]}>{scope.rowIndex + 1}</div>;
								},
								devSn: (scope: any) => {
									return (
										<el-link type="primary" onClick={() => gotoPage(RouterPath.deviceDetail, { sn: scope.row.devSn })}>
											<div class="master-title">{scope.row.devName || scope.row.devSn}</div>
										</el-link>
									);
								}
							}}
						</ProTable>
					</el-card>
				</div>
			);
		};
	}
});
